<template>
	<view class="applyclub-page">
		<u-navbar title="" :autoBack="false" bgColor="transparent" leftIconColor="#ffffff"
			@leftClick="leftClick"></u-navbar>
		<u-gap height="180" bgColor="transparent"></u-gap>
		<view class="mx-5 flex flex-column">
			<image :src="`/static/imgs/applyclub_title_${lang}.png`" mode="widthFix" style="width: 276rpx;height: 52rpx;">
			</image>
			<view class="ftD1D1D1 fs-28 mt-2">{{$t('hhh.t192')}}</view>
		</view>
		<u-gap height="50" bgColor="transparent"></u-gap>
		<view class="bg-white rounded-top-max-lg p-5">
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t193')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t194')" border="surround" v-model.trim="form.name" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t195')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t196')" border="surround" v-model.trim="form.phone" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t197')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t198')" border="surround" v-model.trim="form.email" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t199')}}</text>
				<view class="bgF6F7F9 rounded-lg p-2 flex align-center justify-center box-sizing"
					style="width: 110px;height: 110px;">
					<u-upload :fileList="fileList1" name="1" :maxCount="1" width="176rpx" height="176rpx" @afterRead="uploadImage"
						@delete="deleteLogo">
						<view class="position-relative flex align-center">
							<image src="/static/imgs/add.png" mode="aspectFill" style="width: 176rpx;height: 176rpx;">
							</image>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t200')}}</text>
				<view v-if="file.name"
					class="bgF6F7F9 rounded-lg p-2 flex align-center justify-center box-sizing fs-28 ft333333">{{file.name}}
					<u-icon @tap="deletefile" class="ml-2" name="trash" size="40"></u-icon>
				</view>
				<view v-else class="bgF6F7F9 rounded-lg p-2 flex align-center justify-center box-sizing"
					style="width: 110px;height: 110px;">
					<u-upload :fileList="fileList2" name="2" :maxCount="1" accept="file" width="176rpx" height="176rpx"
						@afterRead="uploadFile">
						<image src="/static/imgs/add.png" mode="aspectFill" style="width: 176rpx;height: 176rpx;"></image>
					</u-upload>
				</view>
			</view>
			<view class="flex flex-column mb-4">
				<text class="fs-26 text-black mb-2">{{$t('hhh.t201')}}</text>
				<view class="bgF6F7F9 rounded-circle px-2 py-1">
					<u--input :placeholder="$t('hhh.t202')" border="surround" v-model.trim="form.remark" :customStyle="{
						'border':0
					}"></u--input>
				</view>
			</view>
			<u-gap height="50" bgColor="transparent"></u-gap>
			<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold" @tap="submitFn">
				{{$t('hhh.t31')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imageToBase64
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					email: '',
					logo: '',
					ssm: '',
					remark: '',
				},
				fileList1: [],
				fileList2: [],
				file: {},
				lang: 'en'
			}
		},
		onShow() {
			this.lang = uni.getStorageSync('hhh-lang') || 'en'
		},
		methods: {
			deleteLogo() {
				this.form.logo = ''
				this.fileList1 = []
			},
			deletefile() {
				this.form.ssm = ''
				this.file = {}
			},
			submitFn() {
				const data = {
					...this.form
				}
				const flag = Object.keys(data).some(key => !data[key])
				if (flag) {
					uni.$tools.toast(this.$t('hhh.t203'))
					return
				}
				HttpApi.clubApply(data).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: this.$t('hhh.t204')
						})
						this.form = this.$options.data().form
						this.fileList1 = []
						this.file = {}
					}
				})
			},
			async uploadImage(data) {
				const base64 = await imageToBase64(data.file.url)
				uni.$tools.uploadFile('/boss/upload/uploadFile', data.file.url, {
					base64: base64,
					type: 'image'
				}).then(res => {
					console.log(res)
					this.form.logo = res.url
					this.fileList1 = [{
						url: res.url
					}]
				})
			},
			async uploadFile(data) {
				console.log(data)
				uni.$tools.uploadFile(
					'/boss/upload/uploadFile',
					data.file.url
				).then(res => {
					console.log(res)
					this.form.ssm = res.url
					this.file = res
				})
			},
		}
	}
</script>

<style lang="scss">
	.applyclub-page {
		background-image: url('/static/imgs/applyclub_bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center top;
	}
</style>